<template>
  <div class="card-container" v-if="showCard">
    <div class="cardList-box">
      <!-- head return-->
      <div class="card-head">
        <van-nav-bar title="银行卡">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="$router.push('/home/account')" />
          </template>
        </van-nav-bar>
      </div>

      <div class="card-content">
        <div class="card-list">
          <div class="card-box" v-for="item in creditCard" :key="item.id">
            <div class="card-info">
              <div class="card-value">
                <div class="iconfont card-logo"></div>
                <div class="card-num">{{item.number}}</div>
              </div>
              <div class="card-data">
                <div>有效至</div>
                <div>{{item.cardDate}}</div>
              </div>
            </div>
            <div class="card-default">
              <div class="def-text">默认</div>
              <div>
                <van-switch v-model="item.isDefault" active-color="orange" inactive-color="white"
                  @click="isDefault(item)" :disabled='item.isDefault?true:false' />
              </div>
            </div>
            <div class="del-card">
              <div>
                <van-icon name="clear" color="orange" />
              </div>
            </div>
          </div>
          <van-button type="primary" block @click="$router.push('/home/addCard')">添加银行卡</van-button>
        </div>
      </div>
    </div>
    <Payments v-if="isForOrder" :creditCard="creditCard" :accountData="accountData"></Payments>
  </div>
</template>

<script>
import axios from 'axios'
import Payments from '../../OrderInside/Payments.vue'

export default {
  components: {
    Payments
  },
  data() {
    return {
      creditCard: [],
      accountData: {},
      showCard: false,
      isForOrder: false
    }
  },
  created() {
    // 初始化请求银行卡信息
    this.initCardData()
    // 此状态用于管理是否显示 支付组件
    this.isForOrder = this.$store.state.isForOrder
  },
  methods: {
    async initCardData() {
      const { data: res } = await axios.get('/static/account/Account.json')
      this.creditCard = res.accountData.creditCard
      this.accountData = res.accountData
      // 卡号隐藏处理
      this.creditCard.forEach((item, i) => {
        // 银行卡号 每4位加 空格
        var num = item.number
          .replace(/\s/g, '')
          .replace(/[^\d]/g, '')
          .replace(/(\d{4})(?=\d)/g, '$1 ')
        // 将前12位替换为 * 号
        var str = num
        for (let i = 0; i < str.length; i++) {
          if (i < 14) {
            if (str[i] !== ' ') {
              str = str.replace(str[i], '*')
            }
          }
        }
        this.creditCard[i].number = str

        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 120
        })
        setTimeout(() => {
          // 处理完毕，显示 Dom
          this.showCard = true
        }, 120)
      })
    },
    // 默认信用卡逻辑
    isDefault(item) {
      if (item.isDefault === false) {
        this.creditCard.some((o, i) => {
          if (o.isDefault === true) {
            this.creditCard[i].isDefault = false
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cardList-box {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  z-index: 2;
  background-color: #ededed;
  .card-head {
    position: fixed;
    width: 100%;
    max-width: 640px;
    z-index: 1;
  }
}
.card-content {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  .card-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 48px;
    width: 93%;
    padding: 0.6em;
    border-radius: 9px;
    background: white;
    .card-box {
      position: relative;
      display: flex;
      width: 100%;
      height: 120px;
      margin-top: 0.3em;
      margin-bottom: 0.6em;
      background-color: #f7f7f7;
      box-shadow: 0px 0px 8px -3px #999999;
      border-radius: 9px;
      .card-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 65%;
        height: 100%;
        .card-value {
          display: flex;
          align-items: center;
          height: 20%;
          margin-top: 0.6em;
          margin-left: 0.6em;
          .card-logo:before {
            content: '\e678';
            font-size: 1.8em;
            margin-right: 0.3em;
          }
          .card-num {
            color: #545454;
            font-size: 1.1em;
          }
        }
        .card-data {
          display: flex;
          flex-direction: column;
          margin-bottom: 0.6em;
          margin-left: 3.3em;
          color: #ababab;
        }
      }
      .card-default {
        display: flex;
        align-items: center;
        width: 25%;
        .def-text {
          color: #ababab;
          margin-right: 0.6em;
        }
        .van-switch {
          display: flex;
          font-size: 1.1em;
        }
      }
      .del-card {
        width: 10%;
        height: 100%;
        .van-icon-clear {
          position: absolute;
          right: 0.3em;
          top: 0.3em;
          font-size: 1.8em;
        }
      }
    }
    /deep/.van-button--primary {
      background: orange;
      border: none;
      border-radius: 9px;
      font-size: 1.1em;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
  }
}
</style>
